<template>
	<view class="kind-main">
		<uni-nav-bar class="head-nav" fixed backgroundColor="#354E44">
			<view class="title">
				分类页
			</view>
			<view slot="left">
				<image class="icon icon-chat" src="../../static/icons/chat.png" mode=""></image>
			</view>
			<view slot="right" class="head-nav-right">
				<navigator class="nav-search" url="/pages/cart/index">
					<image src="../../static/icons/search.png" class="icon icon-search"></image>
				</navigator>
				<navigator class="nav-cart" url="/pages/buyCart/index">
					<image class="icon icon-cart" src="../../static/icons/cart.png"></image>
				</navigator>
			</view>
		</uni-nav-bar>
		<navigator v-if="kindList.length>0" class="block chuangyi" :url="'./product/index?kindId='+kindList[0].id">
			<image class="img" :src="kindList[0].img" mode="scaleToFill"></image>
		</navigator>
		<navigator v-if="kindList.length>0" class="block shipin" :url="'./product/index?kindId='+kindList[1].id">
			<image class="img" :src="kindList[1].img" mode="scaleToFill"></image>
		</navigator>
		<view class="f-d">
			<navigator v-if="kindList.length>0" class="block fengge" :url="'./product/index?kindId='+kindList[2].id">
				<image class="img" :src="kindList[2].img" mode="scaleToFill"></image>
			</navigator>
			<navigator v-if="kindList.length>0" class="block dengju" :url="'./product/index?kindId='+kindList[3].id">
				<image class="img" :src="kindList[3].img" mode="scaleToFill"></image>
			</navigator>
		</view>
	</view>
</template>

<script>
	import kindApi from '@/api/kind'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
	    components: {uniNavBar},
		data(){
			return{
				kindList:[]
			}
		},
		onLoad(){
			this.getKindList()
			//getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
			var pages = getCurrentPages(); //当前页面栈
			console.log('page',pages);
		},
		computed:{
			
		},
		methods:{
			getKindList(){
				kindApi.kindList()
				.then(res=>{
					this.kindList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kind-main{
		.head-nav{
			background-color: $leju-base-color;
			box-sizing: border-box;
			.title{
				width: 100%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
			}
			.icon {
				width: 36rpx;
				height: 36rpx;
			
				&.icon-chat {
					margin-left: 20rpx;
				}
			
				&.icon-search {
					margin-right: 35rpx;
				}
				&.icon-cart{
					margin-right: 30rpx;
				}
			}
			.head-nav-right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				image,
				img {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.chuangyi,
		.shipin{
			width: 670rpx;
			height: 302rpx;
			background: #D5D5D5;
			box-shadow: 0 12rpx 20rpx 0 rgba(83,66,49,0.05);
			border-radius: 10px;
			border-radius: 10px;
			margin: 28rpx auto;
		}
		.f-d{
			width: 670rpx;
			display: flex;
			margin: 0 auto;
			margin-bottom: 48rpx;
			justify-content: space-between;
			.fengge,
			.dengju{
				width: 312rpx;
				height: 442rpx;
				background: #FAFAFA;
				box-shadow: 0 12rpx 20rpx 0 rgba(83,66,49,0.03);
				border-radius: 10px;
				border-radius: 10px;
			}
		}
		.block{
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
